<template>
  <div class="header-wrapper">
    <div class="title">{{ title }}</div>
    <a-tooltip title="放大">
      <a-icon class="fz-20" type="fullscreen" @click="handleFullScreen" />
    </a-tooltip>
    <!-- <div class="form">
      <a-form :form="form" layout="inline">
        <a-form-item>
          <a-select size="small" style="width: 80px" placeholder="年份" v-decorator="['year']">
            <a-select-option :key="year" :value="year" v-for="year in years">{{ year }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-select size="small" style="width: 80px" placeholder="月份" v-decorator="['month']">
            <a-select-option :key="index" :value="index + 1" v-for="index in 12">{{ index + 1 }}月</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>-->
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'title'
    }
  },
  computed: {
    years () {
      const arr = []
      const startYear = 2000
      const endYear = 2090
      for (let index = 0; index <= endYear - startYear; index++) {
        arr.push(startYear + index)
      }
      return arr
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'rtsHeader', onValuesChange: this.onValuesChange })
    }
  },
  methods: {
    onValuesChange (props, value) {
        this.$emit('change', Object.assign(this.form.getFieldsValue(), value))
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
  @import '~ant-design-vue/es/style/themes/default.less';
  .header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .title {
      font-weight: bold;
      color: #fff;
      font-size: 16px;
      display: inline-block;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 10px;
    }
    .form {
      width: 160px;
      /deep/ .ant-select-selection {
        color: #dcdfe6;
        background-color: transparent;
        border: 1px solid #dcdfe6;
        .ant-select-selection__rendered {
          margin-right: 8px;
        }
        /deep/ .ant-select-arrow {
          right: 4px;
          color: #dcdfe6;
        }
      }
    }
  }
  /deep/ .ant-select-dropdown-menu-item {
    padding: 2px 12px;
  }
</style>
